<template>
	<view>
		<!-- 故障整改 -->
		<view class="inspection_io">
			<scroll-view scroll-y="true" class="scroll-Y">
				<view class="inspection_header">
					<view class="inspection_text">
						<text>巡检设备:</text>
						<text class="text_center">{{getRecordIdForm.deviceType}}</text>
					</view>
					<view class="inspection_text">
						<text>巡检内容:</text>
						<text class="text_center">{{getRecordIdForm.inspectionContent}}</text>
					</view>
				</view>

				<view class="inspection_center">
					<view class="">
						<view class="inspection_text">
							现场照片
						</view>

						<view>
							<view class="" style="display: flex;flex-wrap: wrap;">
								<image @tap="previewImageFun(itm)" :key="idx" v-for="(itm,idx) of sceneImgs"
									style="width: 150rpx;margin: 6rpx;height: 150rpx;" :src="baseUrl+itm"></image>
							</view>
						</view>
					</view>

					<view class="">
						<view class="inspection_text">
							巡检情况
						</view>
						<view class="text_center" style="padding: 10rpx 0;">
							{{getRecordIdForm.resultContent || ''}}
						</view>
					</view>

					<view class="" style="border-top: 1rpx solid gainsboro;margin-top: 10rpx;">
						<!-- 				<view class="">
						<view class="inspection_text">
							隐患整改进度
						</view>
						<uni-data-select v-model="rectificationValue" :localdata="rectificationRange"></uni-data-select>
						</uni-section>
					</view> -->
						<view class="">
							<view class="inspection_text">
								已采取措施
							</view>
							<view style=" padding: 10rpx 0;" v-if="getRecordIdForm.pitfallCorrection == 'Y'">
								{{getRecordIdForm.pitfallCorrectionContent}}
							</view>
							<view v-else>
								<uni-easyinput type="textarea" autoHeight v-model="easyinputCuos"
									placeholder="请输入内容"></uni-easyinput>
							</view>
						</view>
						<view class="">
							<view class="inspection_text">
								整改照片
							</view>
							<view style=" padding: 10rpx 0;" v-if="getRecordIdForm.pitfallCorrection == 'Y'">
								<view class="" style="display: flex;flex-wrap: wrap;">
									<image @tap="previewImageFun(itms)" :key="idxs"
										v-for="(itms,idxs) of pitfallCorrectionImgs"
										style="width: 150rpx;margin: 6rpx;height: 150rpx;" :src="baseUrl+itms"></image>
								</view>
							</view>
							<view v-else>
								<uni-file-picker @select="selectZ" v-model="imageValueZ" limit="9"></uni-file-picker>
							</view>
						</view>
					</view>
				</view>

				<view class="inspection_bottom">
					<view v-if="getRecordIdForm.pitfallCorrection == 'Y'" class="bottom_btn" @tap="back()">
						返回
					</view>
					<view v-else class="bottom_btn" @tap="bottomBtn()">
						保存
					</view>
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	import {
		getToken
	} from '@/utils/auth'
	import {
		putRecord,
		getRecordId
	} from '@/apis/modules/inspectionApp';
	import projectConfig from '@/env.config.js';
	export default {
		data() {
			return {
				img: [
					'https://zy.yunxinhai.com/prod-api/profile/upload/2024/08/29/774a2a7f751d76028a016092b83c5b5471116664af95-gZb66Z_fw1200_20240829132100A010.jpg'
				],
				baseUrl: projectConfig.baseUrl,
				inspectionData: [{
					title: '息县污水站巡检',
					jihua: '每周二,周五',
					name: '装完',
					status: 1,
					img: [
						'https://zy.yunxinhai.com/prod-api/profile/upload/2024/08/29/774a2a7f751d76028a016092b83c5b5471116664af95-gZb66Z_fw1200_20240829132100A010.jpg'
					]
				}],
				pitfallRange: [{
						value: 1,
						text: "无隐患"
					},
					{
						value: 2,
						text: "有隐患"
					},
				],
				rectificationRange: [{
						value: 1,
						text: "未整改"
					},
					{
						value: 2,
						text: "已整改"
					},
				],
				pitfallValue: '',
				easyinputValue: '',
				rectificationValue: '',
				easyinputCuos: '',
				imageValueZ: [],
				imageValueX: [],
				id: '',
				getRecordIdForm: {},
				sceneImgs: [],
				pitfallCorrectionImgs: []
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getRecordIdFun(this.id)
		},
		methods: {
			getRecordIdFun(id) {
				getRecordId(id).then((res) => {
					this.getRecordIdForm = res.data
					this.sceneImgs = res.data.sceneImgs ? res.data.sceneImgs.split(',') : ''
					this.pitfallCorrectionImgs = res.data.pitfallCorrectionImgs ? res.data.pitfallCorrectionImgs
						.split(',') : ''
				})
			},
			bottomBtn() {

				let img2 = [];
				for (let item of this.imageValueZ) {
					img2.push(item.imgs)
				}
				let parms = {
					...this.getRecordIdForm,
					pitfallCorrection: 'Y', //是否整改
					pitfallCorrectionContent: this.easyinputCuos, //已采取措施
					pitfallCorrectionImgs: img2.toString(), //整改照片
				}
				putRecord(parms).then((res) => {
					uni.switchTab({
						url: `/pages/tabBar/inspection/inspection`
					});
				})
			},
			back() {
				uni.switchTab({
					url: `/pages/tabBar/inspection/inspection`
				});
			},
			selectZ(e) {
				uni.uploadFile({
					url: `${this.baseUrl}/iot/tool/upload`, //仅为示例，非真实的接口地址
					filePath: e.tempFilePaths[0],
					name: 'file',
					header: {
						Authorization: 'Bearer ' + this.$store.state.vuex_token
					},
					success: (uploadFileRes) => {
						let resArrayJson = JSON.parse(
							uploadFileRes.data)
						this.imageValueZ.push({
							url: this.baseUrl + resArrayJson.url,
							fileName: this.baseUrl + resArrayJson.fileName,
							imgs: resArrayJson.url
						})
						console.log(this.imageValueZ)
					},
					fail: (rrr) => {
						console.log("失败", rrr)
					}
				});
			},
			previewImageFun(img) {
				uni.previewImage({
					urls: [img],
					longPressActions: {
						success: function(data) {},
						fail: function(err) {}
					}
				});
			}

		}
	}
</script>

<style scoped lang="scss">
	.inspection_io {
		width: 100%;
	}

	.scroll-Y {
		height: calc(100vh - 60rpx);
	}

	.inspection_text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #04060D;
		line-height: 48rpx;
		font-style: normal;
		text-transform: none;
	}

	.text_center {
		padding-left: 20rpx;
		font-weight: 400;
	}

	.inspection_text1 {
		font-size: 26rpx;
		color: #9e9e9e;
	}

	.inspection_header {
		background-color: white;
		border-radius: 10rpx;
		padding: 20rpx;
	}

	.inspection_center {
		background-color: white;
		border-radius: 10rpx;
		padding: 0 20rpx 20rpx 20rpx;
	}

	.inspection_bottom {
		position: fixed;
		height: 120rpx;
		width: 100%;
		bottom: 0;
		left: 0;

		.bottom_btn {
			width: 85%;
			margin: auto;
			background-color: blue;
			color: white;
			text-align: center;
			padding: 20rpx 0;
			border-radius: 30rpx;
		}
	}
</style>